<template>
  <div class="main-layout">
    <header class="header">
      <HeaderComponent :show-back="true" title="违禁词管理" />
    </header>

    <div class="main-content">
      <aside class="sidebar">
        <AsideComponent />
      </aside>

      <div class="content-wrapper">
        <div class="content">
          <h2>违禁词管理</h2>

          <el-form label-width="120px" style="max-width: 500px; margin-bottom: 30px;">
            <el-form-item label="新增违禁词">
              <el-input v-model="newWord" placeholder="输入要添加的违禁词" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addWord" icon="el-icon-plus">添加</el-button>
            </el-form-item>
          </el-form>

          <!-- 违禁词列表 -->
          <el-table :data="forbiddenWords" border style="width: 100%">
            <el-table-column prop="word" label="违禁词"></el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="deleteWord(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AsideComponent from '@/components/Aside.vue'
import HeaderComponent from '@/components/Header.vue'

export default {
  name: 'ForbiddenWords',
  components: { AsideComponent, HeaderComponent },
  data() {
    return {
      newWord: '',
      forbiddenWords: []
    };
  },
  mounted() {
    this.loadForbiddenWords();
  },
  methods: {
    async loadForbiddenWords() {
      try {
        const res = await fetch('http://localhost:8888/api/forbidden-words');
        if (!res.ok) throw new Error('加载数据失败');
        const data = await res.json();
        this.forbiddenWords = data.map(w => ({ id: w.id, word: w.word }));
      } catch (err) {
        console.error(err);
        this.$message.error('加载违禁词失败');
      }
    },

    async addWord() {
      const word = this.newWord.trim();
      if (!word) {
        this.$message.warning('请输入违禁词');
        return;
      }

      try {
        const res = await fetch('http://localhost:8888/api/forbidden-words', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ word }) // ✅ 正确格式
        });

        if (!res.ok) {
          const errorData = await res.json();
          this.$message.error(errorData.message || '添加失败');
          return;
        }

        this.$message.success('添加成功');
        this.newWord = '';
        this.loadForbiddenWords();
      } catch (err) {
        console.error('Error adding word:', err);
        this.$message.error('网络请求异常');
      }
    },

    async deleteWord(index) {
      const wordToDelete = this.forbiddenWords[index];
      const id = wordToDelete.id;

      try {
        const res = await fetch(`http://localhost:8888/api/forbidden-words/${id}`, {
          method: 'DELETE'
        });

        if (!res.ok) {
          this.$message.error('删除失败');
          return;
        }

        this.$message.success('删除成功');
        this.loadForbiddenWords();
      } catch (err) {
        console.error('Error deleting word:', err);
        this.$message.error('网络请求异常');
      }
    }
  }
};
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 60px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.content {
  max-width: 600px;
  margin: 0 auto;
}
</style>